<template>
	<div class="pro_div">
		<div class="img_top">
			<img :src="back_img.img" alt="" />
			<span> {{back_img.intro}} </span>
		</div>
		<div class="flex-c-c-c" style="width: 100%; height: 100px">
			<span style="color: #534036; font-size: 40px; margin-top: 40px">最新公告</span>
			<img src="../assets/bl.svg" style="width: 64px; height: auto; margin-top: 28px" />
		</div>
		<div class="flex-c-c-c" style="width: 100%;height: auto;" v-if="is_list">
			<div class="flex-r-b-c" style="width: 1200px;height: auto;align-items: end!important;margin: 40px 0;" v-for="(v,i) in list" :key="i">
				<div class="flex-c-s-s" style="width:540px;height: auto;">
					<span style="font-size: 18px;color: #B6633A;">
						#正在发生
					</span>
					<span style="font-size: 24px;color: #B6633A;margin-top: 15px;">
						{{v.title}}
					</span>
					<p style="font-size: 18px;color: #0000007f;margin-top: 10px;">
						{{v.intro}}
					</p>
					<div class="flex-c-c-c" style="height: 40px;width: 110px;background-color: #B6633A;border-radius: 5px;margin-top: 10px;" @click="routers_fn(v.id)">
						<span class="cur" style="color: #FFF;font-size: 14px;margin-bottom:0">查看详情</span>
					</div>
				</div>
				<div style="width: 540px;height: 321px;overflow: hidden;">
					<img :src="v.img" style="width: 100%;height: auto;">
				</div>
			</div>
		</div>
		<div class="flex-c-c-c" style="width: 100%;height: auto;" v-else>
			<div style="width: 1200px;height: auto;" >
				<div v-for="(v,i) in list.data" :key="i" style="width: 100%;height: 70px;border-bottom: 2px solid #bdbbbb;" class="flex-r-b-c cur" @click="routers_fn(v.id)">
					<span style="color: #907A6E;font-size: 14px;">{{v.title}}</span>
					<span style="color: #0000007f;font-size: 18px;">{{v.createdate}}</span>
				</div>
			</div>
		</div>
		<div class="flex-c-c-c" v-if="is_list"
			style="width: 100%;height:auto;justify-content: flex-end!important;">
			<div class="divs_router_link_hover">
			<img src="../assets/td.svg" style="width: 56px;height: auto;">
			<span style="font-size: 40px;color: #534036;" @click="genduo" class="cur">
				查看以往
			</span>
			</div>
		</div>
		<div class="flex-c-c-c" style="width: 100%; height: 100px; margin-top: 123px" v-else>
			<div>
				<el-pagination background layout="total, prev, pager, next, jumper" :total="list.total"
					:page-size="list.per_page" hide-on-single-page @current-change='fn'>
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		Message,
		MessageBox
	} from 'element-ui';
	import {
		formatDate
	} from '../components/datas.js'
	export default {
		data() {
			return {
				back_img: {},
				obj: {
					page: 0
				},
				list: {},
				is_list:true
			};
		},
		mounted() {
			let headers = {
				token: this.$md5(this.$key + this.$dataTime()),
				rtimes: this.$dataTime(),
				btype: 'ann'
			}
			this.$axios.post(this.$base + '/Index/getBg', headers).then((res) => {
					if (res.data.code == 2000) {
						this.back_img = res.data.data
					} else {
						Message.error(res.data.msg);
					}
					console.log(res)
				})
				.catch(function(error) {
					Message.error(error.message);
				});
				headers.title = 'ann'
				this.$axios.post(this.$base + '/Index/getWebInfo', headers).then((res) => {
						if (res.data.code == 2000) {
							var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
							link.type = 'image/x-icon';
							link.rel = 'shortcut icon';
							link.href = res.data.data.ico;
							document.title = res.data.data.web_title
							document.getElementsByTagName('head')[0].appendChild(link);
						} else {
							Message.error(res.data.msg);
						}
						console.log(res)
					})
					.catch(function(error) {
						Message.error(error.message);
					});
			this.qingqiu()
		},
		methods: {
			routers_fn(id){
					this.$router.push(`/details?type=2&id=${id}`)
			},
			fn(el){
				this.obj.page=el
				this.list_fn(this.obj.page)
			},
			genduo(){
				this.obj.page=this.obj.page+1
				this.is_list=false
				this.list_fn(this.obj.page)
			},
			list_fn(page){
				let headers = {
					token: this.$md5(this.$key + this.$dataTime()),
					rtimes: this.$dataTime(),
					page: this.obj.page
				}
				this.$axios.post(this.$base + '/Announcement/annLists', headers).then((res) => {
						if (res.data.code == 2000) {
							this.list = res.data.data
						} else {
							Message.error(res.data.msg);
						}
						console.log(res)
					})
					.catch(function(error) {
						Message.error(error.message);
					});
			},
			data_fn(time, ges) {
				return formatDate(new Date(Number(time)), ges)
			},
			qingqiu() {
				let headers = {
					token: this.$md5(this.$key + this.$dataTime()),
					rtimes: this.$dataTime(),
				}
				this.$axios.post(this.$base + '/Announcement/annInfo', headers).then((res) => {
						if (res.data.code == 2000) {
							console.log(res.data.data)
							this.list = res.data.data
						} else {
							Message.error(res.data.msg);
						}
						console.log(res)
					})
					.catch(function(error) {
						Message.error(error.message);
					});
			},
		}
	};
</script>

<style lang="less" scoped>
	.img_top {
		width: 100%;
		height: 500px;
		overflow: hidden;
		position: relative;

		img {
			width: 100%;
			height: auto;
		}

		span {
			position: absolute;
			left: 346px;
			top: 180px;
			line-height: 80px;
			font-size: 40px;
			color: #dcdcdc;
			letter-spacing: 10px;
			font-weight: 600;
		}
	}

	.divs_fald {
		position: relative;
		overflow: hidden;

		img {
			width: 570px;
			height: auto;
			transition: width 2s, height 2s;
		}

		.bottom_div {
			position: absolute;
			width: 520px;
			height: 280px;
			bottom: 0;
			left: 0;
			padding-left: 50px;
			padding-bottom: 80px;
			opacity: 0;
			transition: opacity 2s;
			background-color: #00000033;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: end;

		}
	}

	.divs_fald:hover {
		img {
			width: 650px;
			height: auto;
		}

		.bottom_div {
			opacity: 1;
		}
	}

	.divs_router_link_hover {
		position: relative;
		margin: 150px 0px;

		img {
			position: absolute;
			transition: top 2s;
			top: -50px;
			left: calc(50% - 28px);
		}
	}

	@keyframes example {
		50% {
			top: -150px;
		}

		100% {
			top: -50px;
		}
	}

	.divs_router_link_hover:hover {

		span {
			color: #86633A!important;
		}

		img {
			top: -100px;
		}


	}
</style>
